<script setup>
import { ref, computed, onMounted } from 'vue'
import { 
  ShoppingBag, 
  Coin, 
  Timer, 
  LocationInformation,
  CircleCloseFilled,
  WarningFilled
} from '@element-plus/icons-vue'

// 模拟订单数据
const orders = ref([
  {
    id: 'DD20240523001',
    time: '2024-05-23 10:23:45',
    amount: 159.90,
    items: [
      { id: 1, name: '时尚潮流休闲运动鞋', price: 299.00, quantity: 1, thumb: '/placeholder/shoes.jpg', spec: '白色/42码' },
      { id: 2, name: '纯棉休闲短袖T恤', price: 89.00, quantity: 1, thumb: '/placeholder/tshirt.jpg', spec: '黑色/L' }
    ],
    expireTime: Date.now() + 29 * 60 * 1000, // 29分钟后过期
    status: 'unpaid',
    shippingFee: 10.00,
    discount: 238.10
  },
  {
    id: 'DD20240523002',
    time: '2024-05-23 09:45:12',
    amount: 89.00,
    items: [
      { id: 3, name: '无线蓝牙耳机', price: 89.00, quantity: 1, thumb: '/placeholder/earphone.jpg', spec: '白色' }
    ],
    expireTime: Date.now() + 15 * 60 * 1000, // 15分钟后过期
    status: 'unpaid',
    shippingFee: 0.00,
    discount: 0.00
  },
  {
    id: 'DD20240523003',
    time: '2024-05-23 08:30:22',
    amount: 129.00,
    items: [
      { id: 4, name: '智能手环', price: 129.00, quantity: 1, thumb: '/placeholder/watch.jpg', spec: '黑色' }
    ],
    expireTime: Date.now() + 5 * 60 * 1000, // 5分钟后过期
    status: 'unpaid',
    shippingFee: 0.00,
    discount: 20.00
  }
])

// 计算剩余支付时间
const remainingTime = computed(() => {
  return orders.value.map(order => {
    const diff = Math.max(0, order.expireTime - Date.now())
    const minutes = Math.floor(diff / 60000)
    const seconds = Math.floor((diff % 60000) / 1000)
    return {
      minutes: minutes.toString().padStart(2, '0'),
      seconds: seconds.toString().padStart(2, '0')
    }
  })
})

// 支付订单
const payOrder = (orderId) => {
  const order = orders.value.find(o => o.id === orderId)
  if (order) {
    order.status = 'paid'
    setTimeout(() => {
      orders.value = orders.value.filter(o => o.id !== orderId)
    }, 500)
  }
}

// 取消订单
const cancelOrder = (orderId) => {
  const order = orders.value.find(o => o.id === orderId)
  if (order) {
    order.status = 'cancelled'
    setTimeout(() => {
      orders.value = orders.value.filter(o => o.id !== orderId)
    }, 500)
  }
}

// 倒计时定时器
onMounted(() => {
  setInterval(() => {
    // 更新剩余时间计算
    orders.value.forEach((order, index) => {
      const diff = Math.max(0, order.expireTime - Date.now())
      if (diff === 0) {
        order.status = 'expired'
        setTimeout(() => {
          orders.value = orders.value.filter(o => o.id !== order.id)
        }, 3000)
      }
    })
  }, 1000)
})

// 空状态
const empty = computed(() => orders.value.length === 0)
</script>

<template>
  <div class="pending-payment-page">
    <div class="header">
      <h1><el-icon><ShoppingBag /></el-icon> 待付款订单</h1>
      <p class="subtitle">请及时付款，订单将在30分钟后自动取消</p>
    </div>

    <!-- 空状态 -->
    <div v-if="empty" class="empty-state">
      <div class="empty-content">
        <el-icon><Coin /></el-icon>
        <h3>暂无待付款订单</h3>
        <p>您当前没有需要付款的订单，去逛逛吧～</p>
        <el-button type="primary" round>去购物</el-button>
      </div>
    </div>

    <!-- 订单列表 -->
    <div v-else class="order-list">
      <div v-for="(order, index) in orders" :key="order.id" class="order-card">
        <!-- 订单头部 -->
        <div class="order-header">
          <div class="order-info">
            <span class="order-id">订单号: {{ order.id }}</span>
            <span class="order-time">下单时间: {{ order.time }}</span>
          </div>
          <div class="order-status">
            <el-tag v-if="order.status === 'unpaid'" type="warning">
              <el-icon><Timer /></el-icon> 待付款
            </el-tag>
            <el-tag v-else-if="order.status === 'expired'" type="danger">
              <el-icon><WarningFilled /></el-icon> 已超时
            </el-tag>
          </div>
        </div>

        <!-- 商品列表 -->
        <div class="order-items">
          <div v-for="item in order.items" :key="item.id" class="order-item">
            <div class="item-thumb">
              <div class="thumbnail-placeholder"></div>
            </div>
            <div class="item-info">
              <h4 class="item-name">{{ item.name }}</h4>
              <p class="item-spec">{{ item.spec }}</p>
            </div>
            <div class="item-price">
              <div class="price">¥{{ item.price.toFixed(2) }}</div>
              <div class="quantity">x{{ item.quantity }}</div>
            </div>
          </div>
        </div>

        <!-- 订单金额 -->
        <div class="order-summary">
          <div class="summary-row">
            <span>商品总价</span>
            <span>¥{{ (order.amount + order.discount - order.shippingFee).toFixed(2) }}</span>
          </div>
          <div class="summary-row" v-if="order.discount > 0">
            <span>优惠减免</span>
            <span class="discount">-¥{{ order.discount.toFixed(2) }}</span>
          </div>
          <div class="summary-row">
            <span>运费</span>
            <span>+¥{{ order.shippingFee.toFixed(2) }}</span>
          </div>
          <div class="summary-row total">
            <span>应付总额</span>
            <span class="total-amount">¥{{ order.amount.toFixed(2) }}</span>
          </div>
        </div>

        <!-- 操作区域 -->
        <div class="order-actions">
          <div class="countdown" v-if="order.status === 'unpaid'">
            <el-icon><Timer /></el-icon>
            <span>剩余支付时间：{{ remainingTime[index].minutes }}:{{ remainingTime[index].seconds }}</span>
          </div>
          
          <div class="buttons">
            <el-button 
              v-if="order.status === 'unpaid'"
              type="danger" 
              plain 
              size="large" 
              @click="cancelOrder(order.id)"
            >
              <el-icon><CircleCloseFilled /></el-icon> 取消订单
            </el-button>
            <el-button 
              v-if="order.status === 'unpaid'"
              type="primary" 
              size="large" 
              @click="payOrder(order.id)"
            >
              立即支付 ¥{{ order.amount.toFixed(2) }}
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 支付方式提示 -->
    <div v-if="!empty" class="payment-tips">
      <el-alert title="支持支付方式" type="info" :closable="false">
        <div class="payment-methods">
          <div class="method">微信支付</div>
          <div class="method">支付宝</div>
          <div class="method">银联支付</div>
          <div class="method">Apple Pay</div>
        </div>
      </el-alert>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pending-payment-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;

  .header {
    margin-bottom: 30px;
    
    h1 {
      display: flex;
      align-items: center;
      font-size: 24px;
      font-weight: 600;
      color: #333;
      
      .el-icon {
        margin-right: 10px;
        font-size: 28px;
        color: var(--el-color-primary);
      }
    }
    
    .subtitle {
      margin-top: 8px;
      color: #666;
      font-size: 14px;
    }
  }
  
  .empty-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    
    .empty-content {
      text-align: center;
      padding: 40px;
      
      .el-icon {
        font-size: 80px;
        color: var(--el-color-primary-light-5);
        margin-bottom: 20px;
      }
      
      h3 {
        font-size: 20px;
        color: #333;
        margin-bottom: 10px;
      }
      
      p {
        color: #999;
        margin-bottom: 25px;
      }
      
      .el-button {
        padding: 12px 40px;
        font-size: 16px;
      }
    }
  }
  
  .order-list {
    display: grid;
    gap: 20px;
    
    .order-card {
      background: #fff;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
      }
      
      .order-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        background: #f8f9fa;
        border-bottom: 1px solid #eee;
        
        .order-info {
          display: flex;
          flex-direction: column;
          
          .order-id {
            font-weight: 500;
            color: #333;
          }
          
          .order-time {
            font-size: 13px;
            color: #888;
            margin-top: 4px;
          }
        }
        
        .order-status {
          .el-tag {
            font-weight: 500;
            padding: 6px 12px;
            
            .el-icon {
              margin-right: 5px;
            }
          }
        }
      }
      
      .order-items {
        padding: 20px 24px;
        
        .order-item {
          display: flex;
          padding: 15px 0;
          border-bottom: 1px dashed #eee;
          
          &:last-child {
            border-bottom: none;
          }
          
          .item-thumb {
            width: 80px;
            height: 80px;
            margin-right: 16px;
            border-radius: 6px;
            overflow: hidden;
            
            .thumbnail-placeholder {
              width: 100%;
              height: 100%;
              background: linear-gradient(135deg, #f5f7fa, #e4e7ed);
              border-radius: 6px;
            }
          }
          
          .item-info {
            flex: 1;
            
            .item-name {
              font-size: 15px;
              font-weight: 500;
              margin-bottom: 6px;
              color: #333;
            }
            
            .item-spec {
              font-size: 13px;
              color: #999;
            }
          }
          
          .item-price {
            width: 120px;
            text-align: right;
            
            .price {
              font-weight: 500;
              color: #f56c6c;
              margin-bottom: 4px;
            }
            
            .quantity {
              font-size: 13px;
              color: #999;
            }
          }
        }
      }
      
      .order-summary {
        padding: 16px 24px;
        background: #fafafa;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        
        .summary-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;
          font-size: 14px;
          color: #666;
          
          &:last-child {
            margin-bottom: 0;
          }
          
          &.total {
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px dashed #eee;
            
            .total-amount {
              font-size: 18px;
              font-weight: 600;
              color: #f56c6c;
            }
          }
          
          .discount {
            color: #67c23a;
          }
        }
      }
      
      .order-actions {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 24px;
        
        .countdown {
          display: flex;
          align-items: center;
          font-size: 14px;
          color: #e6a23c;
          font-weight: 500;
          
          .el-icon {
            margin-right: 6px;
          }
        }
        
        .buttons {
          display: flex;
          gap: 12px;
        }
      }
    }
  }
  
  .payment-tips {
    margin-top: 30px;
    
    .payment-methods {
      display: flex;
      gap: 20px;
      margin-top: 10px;
      
      .method {
        padding: 6px 16px;
        background: #f5f7fa;
        border-radius: 16px;
        font-size: 14px;
        color: #606266;
      }
    }
  }
}

@media (max-width: 768px) {
  .pending-payment-page {
    padding: 15px;
    
    .order-card {
      .order-header {
        flex-direction: column;
        align-items: flex-start !important;
        
        .order-status {
          margin-top: 10px;
        }
      }
      
      .order-actions {
        flex-direction: column;
        gap: 15px;
        align-items: flex-end !important;
        
        .countdown {
          align-self: flex-start;
        }
      }
    }
  }
}
</style>